<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container {
				width: 400px;
				margin: 0 auto;
				padding-top: 120px;
				text-align: center;
			}
			#container input {
				font-size: 22px;
				line-height: 30px;
				height: 30px;
				outline: none;
			}
			#keyword {
				width: 300px;
				border: none;
				text-align: center;
				border-bottom: 1px solid gray;
			}
			#search {
				width: 80px;
				color: white;
				border: none;
				background-color: red;
			}
			#result {
				width: 400px;
				margin: 10px auto;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input id="keyword" type="text" placeholder="请输入关键词">
			<input id="search" type="button" value="查询">
		</div>
		<hr>
		<p id="result"></p>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$("#search").on("click", function() {
					var keyword = $("#keyword").val().trim();
					if (keyword.length > 0) {
						var url = "http://api.tianapi.com/txapi/dream/"; 
						$.ajax({
							"url": url,
							"type": "get",
							"data": {
								"key": "772a81a51ae5c780251b1f98ea431b84",
								"word": keyword,
							},
							"dataType": "json",
							"success": function(jsonObj) {
								if (jsonObj.code == 250) {
									$("#result").text(jsonObj.msg);
								} else {
									$("#result").text(jsonObj.newslist[0].result);
								}
							}
						});
					}
				});
			});
		</script>
	</body>
</html>
